<template>
	<view class="container">
    <view class="navbar">
      <!-- #ifdef MP-WEIXIN -->
      <navbar title="我的订单" left="home"></navbar>
      <!-- #endif -->
      <!-- #ifdef MP-ALIPAY -->
      <navbar title="我的订单" bgColor="#000" fontColor="#fff"></navbar>
      <!-- #endif -->
    </view>
    <view class="search">
<!--      <u-select v-model="searchShow" :list="searchList" mode = single-column></u-select>-->
      <view class="search_content" @click="searchShow=!searchShow">
        <u-icon :name="searchShow? 'arrow-down-fill' :'play-right-fill'" size="38" top="-1"></u-icon>
        <view>筛选</view>
      </view>
      <u-picker :show="searchShow" :closeOnClickOverlay="true" ref="uPicker" :columns="searchList" keyName="label"
                @change="changeHandler" :defaultIndex="[0]"
                @confirm="searchConfirm"
                @cancel="searchCancel"
                @close="searchCancel">
      </u-picker>
    </view>
    <view class="search_text">{{param.timeLabel}}</view>
    <scroll-view class="order-box" :upper-threshold="0" :lower-threshold="0"  scroll-y @scrolltoupper="scrollTop" @scrolltolower="scrollBottom">
      <view class="order-detail-box" v-for="(item,index) in orderList" :key="index" @click="goOrderDetail(item)">
        <view class="branch-name">
<!--          <u-icon size="48" name="/static/image/store.png" top="-5"></u-icon>-->
          <view class="iconfont vivipos-icon-shangdian branch-icon"></view>
          <view class="shop-name">{{ item.shop_name }}</view>
        </view>
        <view class="order-detail">
          <view class="image">
            <image :src="item.store_url" width="180rpx" height="180rpx" mode="widthFix" />
          </view>
          <view class="content">
            <view class="order-name">{{ item.order_source_name }}</view>
            <view class="date-time">{{item.sale_submitted}}</view>
          </view>
          <view class="order-price">¥{{item.payment_amt|numFilter}}</view>
          <view class="back" v-show="item.back_tag">已取消</view>
        </view>
      </view>
      <u-loadmore :status="status" fontSize="24"/>
    </scroll-view>
  </view>
</template>
<script>
import pageApi from '@/api/page'
export default {
  data() {
        return {
          searchShow: false,
          searchList: [
            [{
              label: '美食订单',
              value: 0
            }]
          ],
          param:{
            timeLabel: '美食订单',
            timeType: 0
          },
          orderList: [],
          status: 'loadmore',
          page: 1,
          limit: 10
        };
    },
    onLoad(options) {
      this.getList()
    },
  computed: {

    },
  filters: {
    numFilter(value) {
      // 截取当前数据到小数点后两位
      let realVal = parseFloat(value).toFixed(2);
      return realVal;
    },
  },
    methods: {
      changeHandler(e) {
        const {
          // columnIndex,
          index,
          // 微信小程序无法将picker实例传出来，只能通过ref操作
          // picker = this.$refs.uPicker
        } = e
        this.param.timeType = this.searchList[0][index].value
        this.param.timeLabel = this.searchList[0][index].label

      },
      searchConfirm(e) {
        this.status = 'loading'
        this.page=1
        this.getList()
      },

      searchCancel(e) {
        this.searchShow = false
      },
      goOrderDetail(item) {
        // console.log(item)
        // console.log(12321321312+"========")
        uni.navigateTo({
          url: "/pages/myOrder/detail?order_id="+item.order_id,
          fail: (err) => {
            console.log(err);
          },
        });
      },
      getList() {
        pageApi.userOrder({
          page: this.page,
          limit: this.limit
        }).then(res=>{
          this.searchShow = false
          if(res.data.Data.length >0){
            this.orderList = this.orderList.concat(res.data.Data)
            this.status = 'loadmore'
            return
          }
          this.status = 'nomore'
        })
      },
      // 滚到滚动条上方
      scrollTop(e) {
        console.log('=======top')
      },
      // 滚动条底部
      scrollBottom(e) {
        this.status = 'loading'
        this.page+=1
        this.getList()
      },
    },
};
</script>
<style lang="scss">
page{
  background-color: #efeff3 !important;
}
.container {
  .search{
    height: 100rpx;
    background-color: white;
    margin-top: 20rpx;
    line-height: 100rpx;
    .search_content{
      display: flex;
      flex-direction: row-reverse;
      padding-right: 50rpx;
    }
  }
  .search_text{
    height: 60rpx;
    line-height: 80rpx;
    padding-left: 50rpx;
  }
  .order-box{
    height: 75vh;
    //background-color: red;
    .order-detail-box{
      margin-top: 20rpx;
      background-color: white;
      border-radius: 20rpx;
      //height: 270rpx;
      padding-bottom: 30rpx;
      .branch-name{
        height: 70rpx;
        line-height: 70rpx;
        padding-left: 20rpx;
        display: flex;
        flex-direction: row;
        .branch-icon{
          color: #bfbfbf;
          font-size: 36rpx;
        }
		.shop-name{
			padding-left: 5rpx;
			font-size: 28upx;
		}
      }
    }
    .order-detail{
      margin-left: 20rpx;
      //border-radius: 20rpx;
      background-color: #edecf1;
      height: 180rpx;
      display: flex;
      flex-direction: row;
      justify-content:space-between;
      position: relative;
      .image{
        //padding: 0 10rpx 10rpx 0rpx;
        //border: solid 10rpx #cccccc;
        width: 180rpx;
        image{
          width: 180rpx !important;
          height: 180rpx !important;
        }
      }

      .content{
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        //align-items: center;
        .order-name{
          font-weight: 200;
          //font-weight: bolder;
        }
        .date-time{
          padding-top: 20rpx;
          color: #959595;
          font-size: 30upx;
        }
      }

      .order-price{
        font-weight: 200;
        padding-top: 40rpx;
        padding-right: 20rpx;
      }

      .back{
        border: solid 1px red;
        padding: 10rpx 0rpx;
        height: 30rpx;
        line-height: 30rpx;
        width: 150rpx;
        text-align: center;
        color: red;
        position: absolute;
        transform: rotate(-30deg);
        right: 150rpx;
        top: 60rpx;
        z-index: 99999;
      }

    }
  }
}
</style>
